import { useState } from 'react';
import styles from './index.less';
import BinarySearchTree from './components/tree/BinarySearchTree';
import PriorityQueue from './components/queue/PriorityQueue';
import DirectedGraph from './components/graph/DirectedGraph';
import UndirectedGraph from './components/graph/UndirectedGraph';
import { FunctionComponent } from 'react';

type ConstructureObj = { key: string, name: string, component: FunctionComponent };

export default () => {
    const [structureList, _] = useState<ConstructureObj[]>([
        { key: 'BST', name: '二叉搜索树', component: BinarySearchTree },
        { key: 'PriorityQueue', name: '优先队列', component: PriorityQueue },
        { key: 'DirectedGraph', name: '有向图', component: DirectedGraph },
        { key: 'UndirectedGraph', name: '无向图', component: UndirectedGraph },
    ]);
    const [constructure, setConstructure] = useState<ConstructureObj>();

    const showConstructure = (c: ConstructureObj) => {
        setConstructure(c);
    }

    return (
        <div className={styles.container}>
            <p className={styles.title}>Data-Strcuture-Typed</p>

            <div className={styles.buttons}>
                {structureList.map((item) => {
                    const isCurrent = item.key == constructure?.key;
                    return (
                        <div key={item.key} className={isCurrent ? styles.buttonSelect : styles.button} onClick={() => showConstructure(item)}>
                            {item.name}
                        </div>
                    );
                })}
            </div>

            <div className={styles.content}>
                {!!constructure && <constructure.component />}
            </div>
        </div>
    );
}
